<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="订单编号">
                <a-input v-model="queryParam.id" placeholder="请输入订单编号"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入手机号"></a-input>

              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="订单状态">
                  <a-select v-model="queryParam.order_state" placeholder="请选择订单状态" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="10">待付款</a-select-option>
                    <a-select-option value="20">待发货</a-select-option>
                    <a-select-option value="30">待收货</a-select-option>
                    <a-select-option value="40">收货完成</a-select-option>
                    <a-select-option value="100">订单取消</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="支付状态">
                  <a-select v-model="queryParam.pay_state" placeholder="请选择支付状态" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="10">待付款</a-select-option>
                    <a-select-option value="20">支付成功</a-select-option>
                    <a-select-option value="30">支付中</a-select-option>
                    <a-select-option value="40">支付失败</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="物流单号">
                  <a-input v-model="queryParam.logistics_no" placeholder="请输入物流单号"></a-input>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="queryTable">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"></a-icon>
                </a>
              </span>
            </a-col>
          </a-row>

        </a-form>
      </div>

      <a-table :columns="columns" :dataSource="dataList" :pagination="false" rowKey="id">
        <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
        <div slot="order" slot-scope="text" >
          <a-tag color="blue">{{ text | orderStatusFilter }}</a-tag>

        </div>
        <div slot="pay" slot-scope="text" >
          <a-tag color="blue">{{ text | payStatusFilter }}</a-tag>
        </div>
        <span slot="action" slot-scope="record">
          <a-dropdown>
            <a class="ant-dropdown-link">
              <a-icon type="ordered-list"></a-icon>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click.prevent="toDetail(record)">订单详情</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:" @click.prevent="showModal(record)">发货</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  v-if="dataList.length"
                  title="确认收货?"
                  @confirm="() => onReceive(record)">
                  <a href="javascript:">收货</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  v-if="dataList.length"
                  title="确认收货?"
                  @confirm="() => orderDone(record)">
                  <a href="javascript:">完成订单</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
      <my-pagination
        :total="pagination.totalCount"
        :pageSize="pagination.pageSize"
        :current="pagination.pageNo"
        @onChange="onChangePage"
        @onShowSizeChange="onShowSizeChangePage"
      ></my-pagination>
    </a-card>

    <a-modal
      title="发货"
      v-model="visible"
      width="60%"
      @ok="onDelivery"
      okText="发货"
      cancelText="取消"
    >
      <a-row type="flex" justify="center" align="top" >
        <a-col :span="4"><p class="height-100">购物清单</p></a-col>
        <a-col :span="12" style="border-bottom: 1px solid;margin-bottom: 20px;padding-bottom: 10px" >
          <a-row
            style="margin-bottom: 10px"
            type="flex"
            justify="center"
            align="top"
            v-for="good in orderInfo.order_goods"
            :key="good.id" >
            <a-col :span="8">
              <img :src="'https://admin.muyumall.com'+good.goods_img" alt="" height="100px">
            </a-col>
            <a-col :span="6"><p class="height-80">{{ good.name }}</p></a-col>
            <a-col :span="6"><p class="height-80">{{ good.price }}元</p></a-col>
            <a-col :span="4"><p class="height-80">X{{ good.number }}</p></a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"><p class="height-100">收货地址</p></a-col>
        <a-col :span="12" style="border-bottom: 1px solid;margin-bottom: 20px">
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6">收货人姓名</a-col>
            <a-col :span="6"><p class="height-80">{{ orderInfo.order_address.address_name || "无" }}</p></a-col>
            <a-col :span="6"><p class="height-80">手机号</p></a-col>
            <a-col :span="6"><p class="height-80">{{ orderInfo.order_address.address_phone || "无" }}</p></a-col>
          </a-row>

          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">省市县</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.order_address.province || "无" }}>{{ orderInfo.order_address.city || "无" }}>{{ orderInfo.order_address.area || "无" }}</p></a-col>
          </a-row>

          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">详细地址</p></a-col>
            <a-col :span="14"><p class="height-80">{{ orderInfo.order_address.detailed_address || "无" }}</p></a-col>
            <a-col :span="4"><a-button @click="doCopy">复制</a-button></a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"><p class="height-100">运单号</p></a-col>
        <a-col :span="12" style="margin-bottom: 20px">
          <a-input v-model="deliveryParam.logistics_no" placeholder="请输入运单号"></a-input>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"></a-col>
        <a-col :span="12" style="margin-bottom: 20px">
          <a-alert
            v-if="showErr"
            type="error"
            message="Error text"
            closable></a-alert>
        </a-col>
      </a-row>
    </a-modal>

  </div>
</template>

<script>
import MyPagination from '../../components/Autism/myPagination'
import { queryOrder, delivery, receive, queryOrderId } from '@/api/order'

const columns = [
  {
    title: '订单编号',
    dataIndex: 'id',
    key: 'id'
  }, {
    title: '用户手机号',
    dataIndex: 'phone',
    key: 'phone '
  }, {
    title: '支付单号',
    dataIndex: 'pay_no',
    key: 'pay_no'
  }, {
    title: '订单状态',
    key: 'order_state',
    dataIndex: 'order_state',
    slots: { title: 'order' },
    scopedSlots: { customRender: 'order' }
  }, {
    title: '支付状态',
    key: 'pay_state',
    dataIndex: 'pay_state',
    slots: { title: 'pay' },
    scopedSlots: { customRender: 'pay' }
  }, {
    title: '物流单号',
    key: 'logistics_no',
    dataIndex: 'logistics_no'
  }, {
    title: '实付金额',
    key: 'amount',
    dataIndex: 'amount'
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }]

export default {
  name: 'OrderList',
  components: {
    MyPagination
  },
  data () {
    return {
      address: '',
      showErr: false,
      orderInfo: {
        order_address: {}
      },
      deliveryParam: {
        id: '',
        logistics_no: ''
      },
      dialogModel: this.$form.createForm(this),
      confirmLoading: false,
      visible: false,
      categoryOptions: [ '大米', '豆油', '土豆子' ],
      statusOptions: [ '已上线', '已下线' ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      },
      currentTab: 0,
      advanced: false,
      queryParam: {
      },
      columns,
      dataList: []
    }
  },
  beforeCreate () {},
  create () {
  },
  mounted () {
    this.getList()
  },
  methods: {
    reset () {
      this.queryParam = {}
      this.getList()
    },
    doCopy () {
      const _this = this
      const addr = this.orderInfo.order_address
      this.address += addr.address_name
      this.address += addr.address_phone
      this.address += addr.province
      this.address += addr.city
      this.address += addr.area
      this.address += addr.detailed_address
      this.$copyText(this.address).then(function (e) {
        _this.$message.success('复制成功！')
      })
    },
    // 订单完成
    orderDone () {
      this.$message.success('订单完成！')
    },
    // 分页获取列表
    getList: function (isSearch) {
      let param = {
        page_index: this.pagination.pageNo,
        page_size: this.pagination.pageSize
      }

      if (isSearch) {
        param = Object.assign(this.pagination, this.queryParam)
      }

      queryOrder(param)
        .then((res) => {
          console.log(res)
          this.dataList = res.collection
          this.pagination.pageNo = res.page_index
          this.pagination.pageSize = res.page_size
          this.pagination.totalCount = res.total_count
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 根据id查询订单
    getOrderInfo (id) {
      queryOrderId({ id })
        .then(res => {
          console.log(res)
          this.orderInfo = res
        })
        .catch(err => {
          console.log(err)
          this.$message.error('获取订单详情失败！')
        })
    },

    // 展示弹窗
    showModal: function (order) {
      console.log(order)
      this.deliveryParam.id = order.id
      this.deliveryParam.logistics_no = order.logistics_no
      this.getOrderInfo(order.id)
      this.visible = true
    },
    // 发货
    onDelivery () {
      if (!this.deliveryParam.logistics_no) {
        this.showErr = true
        return false
      }
      delivery(this.deliveryParam)
        .then((res) => {
          this.visible = false
          if (res) { this.$message.success('发货成功！') }
          this.getList()
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
          this.visible = false
          this.$message.error('发货失败！')
        })
    },

    // 收货
    onReceive (data) {
      console.log(data)
      receive({
        id: data.id
      })
        .then((res) => {
          console.log(res)
          if (res) { this.$message.success('收货成功！') }
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('收货失败！')
        })
    },
    toDetail (order) {
      this.$router.push({ path: 'order-detail', query: order })
    },
    queryTable () {
      console.log(this.queryParam)
      this.getList(true)
    },
    onChangePage (pageNo, pageSize) {
      this.pagination.pageNo = pageNo
      this.pagination.pageSize = pageSize
      // 重新请求数据
      this.getList()
    },
    onShowSizeChangePage (pageNo, pageSize) {
      this.pagination.pageSize = pageSize
      // 重新请求数据
      this.getList()
    },
    categoryChange (selectedItems) {
      console.log(selectedItems)
      this.queryParam.category = selectedItems
    },
    statusChange (selectedItems) {
      console.log(selectedItems)
      this.queryParam.status = selectedItems
    },
    handleCancel () {
      this.visible = false
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    }
  }
}
</script>

<style lang="less" scoped>
</style>
